iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
1
Modern Web

30天CSS&Bootstrap排版統整系列 第 5

Day5--水平置中(文字、圖片、...)

  • 分享至 

  • xImage
  •  

使用text-align:center;

  • CSS的text-align屬性是用來設定網頁容器(ex:div,span,...)內的文字、圖片等元素的水平對齊效果。
  • 生效條件
    1.給元素設置text-align:center,其中的文字或圖片等元素即可達到水平置中。
  • 範例
  .parent{
      border: 2px solid green;
      width: 500px;
      height: 100px;
    }
  .child{
      width: 100px;
      margin: 0 auto;
      border: 2px solid blue;
      text-align: center;
    }
    <div class="parent">
        <p class="child">文字置中</p>
        <p class="child">文字置中</p>
    </div>
  • 結果
    https://ithelp.ithome.com.tw/upload/images/20200920/20129568LJfeJnftkO.png

還有一種方式(Bootstrap),

使用 class="text-center"

  • 生效條件
    1.給元素設置.text-center,文字即可達到水平置中。
  • 範例
  <div class="container border border-primary">
        <p class="text-center">Center aligned text on all viewport sizes.</p>
  </div>
  • 結果
    https://ithelp.ithome.com.tw/upload/images/20200920/20129568yzpvMfioSt.png

上一篇
Day4--水平置中(4)
下一篇
Day6--垂直置中(1)
系列文
30天CSS&Bootstrap排版統整30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言